<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			举报详情
		</view>
		<view class=""  v-if="!loading" >
			<view class="base-box">
				<view class="base">
					<u-table class="u-table-basic"  align="left">
						<u-tr style="" >
							<u-th class="u-table-th bold" align="left" >
								基础信息
							</u-th>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户头像
							</u-td>
							<u-td class="u-table-td "  >
								<view class="flex-layout">
									<u-image width="40px" height="40px" :src="data.userinfo.head_image"
										@click="eventImage(data.userinfo.head_image)"></u-image>
								</view>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户姓名
							</u-td>
							<u-td class="u-table-td "  >
								{{data.userinfo.name}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户手机
							</u-td>
							<u-td class="u-table-td "  >
								{{data.userinfo.mobile}}
							</u-td>
						</u-tr>
						
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								被举报对象
							</u-td>
							<u-td class="u-table-td "  >
								{{data.report.name}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								被举报对象
							</u-td>
							<u-td class="u-table-td "  >
								<view class="flex-layout">
									<u-image width="40px" height="40px" :src="data.report.head_image"
										@click="eventImage(data.report.head_image)"></u-image>
								</view>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								举报内容
							</u-td>
							<u-td class="u-table-td "  >
								{{data.content}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								举报类型
							</u-td>
							<u-td class="u-table-td "  >
								{{data.report_type}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								被举报角色
							</u-td>
							<u-td class="u-table-td "  >
								{{data.type =='tech'?"技师":"店铺"}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								处理状态
							</u-td>
							<u-td class="u-table-td "  >
								<view :class=" data.status[data.status.length -1].value? 'uni-color-success':'uni-color-error'">
									{{data.status[data.status.length -1].value ? "处理完成":"暂未处理"}}
								</view>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								举报状态说明
							</u-td>
							<u-td class="u-table-td "  >
								{{data.status[data.status.length -1].text}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								新状态时间
							</u-td>
							<u-td class="u-table-td "  >
								<uni-dateformat :date="data.status[data.status.length -1].create_time" ></uni-dateformat>
							</u-td>
						</u-tr>
						
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								创建时间
							</u-td>
							<u-td class="u-table-td"  >
								<uni-dateformat :date="data.create_time" ></uni-dateformat>
							</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="base">
					<u-table class="u-table-basic"  align="left" >
						<u-tr style="" >
							<u-th class="u-table-th bold" align="left" >
								图片信息
							</u-th>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								举报图片
							</u-td>
							<u-td class="u-table-td"  >
								<view class="flex-layout" style="width:250px;">
									<u-swiper  height="400" @click="eventImage(data.image)" :list="data.image"></u-swiper>
								</view>
							</u-td>
						</u-tr>
						
					</u-table>
				</view>
			</view>
			<view class="util-button">
				<view class="">
					<u-button type="primary" @click="this.showReport = true;" size="mini" :disabled=" data.status[data.status.length -1].value " >
						举报处理
					</u-button>
				</view>
				
				<view class="">
					<u-button type="info" size="mini" @click="onBack" >
						返回列表
					</u-button>
				</view>
			</view>
		</view>
	</view>
	<u-toast ref="uToast" ></u-toast>
	<u-popup v-model="showReport" mode="center" closeable border-radius="10">
		<view class="uni-popup-box">
			<view class="uni-global-title" >处理结果</view>
			<view class="">
				<textarea v-model="content"
					style="width:calc(100% - 20px);height:188px;background:#f8f8f8;padding:10px;font-size:.9rem;"
					placeholder="请在此输入处理结果" />
			</view>
			<view style="display: flex;gap:20px;margin-top:10px" >
				<view style="flex:1">
					<u-button type="primary" @click="onReportSubmit" >
						处理确认
					</u-button>
				</view>
				<view style="flex:1">
					<u-button type="info" @click="this.showReport = false ;" >
						关闭
					</u-button>
				</view>
			</view>
		</view>
	</u-popup>
	
</template>

<script>
	import {onStepValue} from "/common/js_file/user-list.js" ;
	import Util from "/common/util/util.js";
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			return {
				loading:true,
				uid:'',
				data:{},
				showReport:false,
				content:"",
				addressData:[],// 地址信息
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,position:'top',
					url: '/pages/user/user-list/user-list'
				})
			}
		},
		methods: {
			getData(){
				this.loading = true ;
				const field = "_id,userinfo,report,content,image,create_time,report_type,type,status";
				global.getOne('report',{_id:this.uid},field).then(res => {
					let data = res.data;
					this.data = data;
					this.loading = false ;
				})
			},
			// 处理举报
			onReportSubmit(){
				this.showReport = false;
				const data = this.data;
				let status = {
					text:this.content,
					value:1,
					create_time:Date.now()
				}
				this.loading = true;
				uniCloud.importObject("report",{customUI:true}).pushReportStatus(status,data._id).then(result => {
					if(result.code == 200){
						this.$refs.uToast.show({
							title:"处理完成",type: 'success',duration:500,position:'top',
							callback:()=>{
								this.loading = false;
								uni.navigateTo({url:'./report'}) ;
							}
						})
					}else {
						this.loading = false;
						this.$refs.uToast.show({title:"网络错误请重试",type: 'error',duration:2000,position:'top' })
					}
				})
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
			onBack(){
				return	uni.navigateBack(1)
			},
		}
	}
</script>

<style>
	.util-button{
		padding:20px;
		display: flex;
		gap:20px;
		justify-content: center;
	}
	.bold{
		font-weight: 600;
	}
	.base-box{
		display: flex; 
		gap:10px;
		margin-bottom:10px;
	}
	.base{
		width: 50%;
	}
</style>
